<!DOCTYPE HTML>
<html lang="en" >
    <!-- Start book Introduction -->
    <head>
        <!-- head:start -->
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>css选择器 | Introduction</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 2.6.7">
        
        
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
        
    <link rel="stylesheet" href="../gitbook/style.css">
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-toggle-chapters/toggle.css">
        
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-highlight/website.css">
        
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-search/search.css">
        
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-fontsettings/website.css">
        
    
    

        
    
    
    <link rel="next" href="../css/css元素选择器.html" />
    
    
    <link rel="prev" href="../css/CSS.html" />
    

        <!-- head:end -->
    </head>
    <body>
        <!-- body:start -->
        
    <div class="book"
        data-level="2.1"
        data-chapter-title="css选择器"
        data-filepath="css/css选择器.md"
        data-basepath=".."
        data-revision="Fri Sep 01 2017 15:11:26 GMT+0800 (中国标准时间)"
        data-innerlanguage="">
    

<div class="book-summary">
    <nav role="navigation">
        <ul class="summary">
            
            
            
            

            

            
    
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="../index.html">
                
                        <i class="fa fa-check"></i>
                        
                        Introduction
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1" data-path="html/html简介.html">
            
                
                    <a href="../html/html简介.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.</b>
                        
                        html
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.1" data-path="html/table.html">
            
                
                    <a href="../html/table.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.1.</b>
                        
                        table
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="html/form.html">
            
                
                    <a href="../html/form.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.2.</b>
                        
                        form
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2" data-path="css/CSS.html">
            
                
                    <a href="../css/CSS.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.</b>
                        
                        css
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter active" data-level="2.1" data-path="css/css选择器.html">
            
                
                    <a href="../css/css选择器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.</b>
                        
                        css选择器
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.1.1" data-path="css/css元素选择器.html">
            
                
                    <a href="../css/css元素选择器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.1.</b>
                        
                        css元素选择器
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.1.2" data-path="css/class选择器与id选择器.html">
            
                
                    <a href="../css/class选择器与id选择器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.2.</b>
                        
                        class选择器与id选择器
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.1.3" data-path="css/css关系选择器.html">
            
                
                    <a href="../css/css关系选择器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.3.</b>
                        
                        关系选择器
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.1.4" data-path="css/css伪类选择器.html">
            
                
                    <a href="../css/css伪类选择器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.4.</b>
                        
                        伪类选择器
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.1.5" data-path="css/css属性选择器.html">
            
                
                    <a href="../css/css属性选择器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.5.</b>
                        
                        属性选择器
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.1.6" data-path="css/css伪对象选择器.html">
            
                
                    <a href="../css/css伪对象选择器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.6.</b>
                        
                        伪对象选择器
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.1.7" data-path="css/css通配选择器.html">
            
                
                    <a href="../css/css通配选择器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.7.</b>
                        
                        通配选择器
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.2" data-path="css/css属性.html">
            
                
                    <a href="../css/css属性.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.</b>
                        
                        css属性
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.2.1" data-path="css/字体font.html">
            
                
                    <a href="../css/字体font.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.1.</b>
                        
                        字体
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.2.2" data-path="css/颜色color.html">
            
                
                    <a href="../css/颜色color.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.2.</b>
                        
                        颜色
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.2.3" data-path="css/文本装饰Text Decoration.html">
            
                
                    <a href="../css/文本装饰Text Decoration.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.3.</b>
                        
                        文本装饰
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.2.4" data-path="css/居中.html">
            
                
                    <a href="../css/居中.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.4.</b>
                        
                        居中
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.2.5" data-path="css/边框border.html">
            
                
                    <a href="../css/边框border.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.5.</b>
                        
                        边框
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.2.6" data-path="css/段落控制.html">
            
                
                    <a href="../css/段落控制.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.6.</b>
                        
                        段落
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.3" data-path="css/reset.html">
            
                
                    <a href="../css/reset.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.</b>
                        
                        css重置样式
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.4" data-path="css/animation/animation.html">
            
                
                    <a href="../css/animation/animation.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.4.</b>
                        
                        动画效果animation
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.4.1" data-path="css/animation/transition.html">
            
                
                    <a href="../css/animation/transition.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.4.1.</b>
                        
                        过渡Transition
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.4.2" data-path="css/animation/transform.html">
            
                
                    <a href="../css/animation/transform.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.4.2.</b>
                        
                        变换Transform
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.5" data-path="css/viewport/viewport.html">
            
                
                    <a href="../css/viewport/viewport.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.5.</b>
                        
                        移动端viewport
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.5.1" data-path="css/viewport/Length.html">
            
                
                    <a href="../css/viewport/Length.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.5.1.</b>
                        
                        Length
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.5.2" data-path="css/viewport/bootstrap.html">
            
                
                    <a href="../css/viewport/bootstrap.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.5.2.</b>
                        
                        bootstrap
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.5.3" data-path="css/viewport/@media媒体查询.html">
            
                
                    <a href="../css/viewport/@media媒体查询.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.5.3.</b>
                        
                        @media媒体查询
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    

            </ul>
            
        </li>
    


            
            <li class="divider"></li>
            <li>
                <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
                    Published with GitBook
                </a>
            </li>
            
        </ul>
    </nav>
</div>
<!--�N�`�WLM����Ս��
�;��0,��1ϙX���ߣ�c	��N>�LH�N�9l�o,pwE`����[?� �
�>��C]�{�¼�-3�{c}��q����y�ٚK�5�h.R�ٳ!(YUiId��tpV49���f�����~��J�}~_e���OK
&T-Xߒx$�5���`�.�B����l�L�,�x�H|������z,��t��1����� �Tt_��6���D�������F��1�A�X�ZÃ���JX��s��C�E�}}x��C�F�p]������>�	�}a<� �+R0��+�+�+��O ;�Z�+ �+-->
    <div class="book-body">
        <div class="body-inner">
            <div class="book-header" role="navigation">
    <!-- Actions Left -->
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../" >Introduction</a>
    </h1>
</div>
<!--�д��x���3�z��S@��<��M��n<D��CKRO��	3['Q��}�'r �B@�5��SAzT!�&��9~�
i��Ca�K�Td������kBU�E��������BŁR:���2��m��[5�
H��hs'E��jFp�����qa�%5졳1��T�6��e+�y'��0է9��%x5���{��f�Oo�*u>���a��+���vI.��9����.���[���a$��>�H��e��}��L���6'YMp�����r�:�1Q l�8Hqp{:a����"}���[����>����5�����h�4A49��� �+R0��+�+�+��O ;�Z��+ �+-->
            <div class="page-wrapper" tabindex="-1" role="main">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-">
                    
                        <h3 id="css&#x9009;&#x62E9;&#x5668;">css&#x9009;&#x62E9;&#x5668;</h3>
<pre><code>&#x5728;CSS&#x4E2D;&#xFF0C;&#x9009;&#x62E9;&#x5668;&#x7528;&#x4E8E;&#x5B9A;&#x4F4D;&#x6211;&#x4EEC;&#x60F3;&#x8981;&#x6837;&#x5F0F;&#x5316;&#x7684;&#x7F51;&#x9875;HTML &#x5143;&#x7D20;&#x3002;
&#x5404;&#x79CD;&#x5404;&#x6837;&#x53EF;&#x7528;&#x7684;CSS&#x9009;&#x62E9;&#x5668;&#x5141;&#x8BB8;&#x6211;&#x4EEC;&#x7CBE;&#x786E;&#x9009;&#x62E9;&#x8981;&#x6837;&#x5F0F;&#x5316;&#x7684;&#x5143;&#x7D20;&#x3002;
</code></pre><p>&#x9009;&#x62E9;&#x5668;&#x53EF;&#x4EE5;&#x88AB;&#x5206;&#x4E3A;&#x4EE5;&#x4E0B;&#x7C7B;&#x522B;&#xFF1A;</p>
<ul>
<li>&#x7B80;&#x5355;&#x9009;&#x62E9;&#x5668;&#xFF08;Simple selectors&#xFF09;&#xFF1A;&#x901A;&#x8FC7;&#x5143;&#x7D20;&#x7C7B;&#x578B;&#x3001;class &#x6216; id &#x5339;&#x914D;&#x4E00;&#x4E2A;&#x6216;&#x591A;&#x4E2A;&#x5143;&#x7D20;&#x3002;</li>
<li>&#x5C5E;&#x6027;&#x9009;&#x62E9;&#x5668;&#xFF08;Attribute selectors&#xFF09;&#xFF1A;&#x901A;&#x8FC7; &#x5C5E;&#x6027; / &#x5C5E;&#x6027;&#x503C; &#x5339;&#x914D;&#x4E00;&#x4E2A;&#x6216;&#x591A;&#x4E2A;&#x5143;&#x7D20;&#x3002;</li>
<li>&#x4F2A;&#x7C7B;&#xFF08;Pseudo-classes&#xFF09;&#xFF1A;&#x5339;&#x914D;&#x5904;&#x4E8E;&#x786E;&#x5B9A;&#x72B6;&#x6001;&#x7684;&#x4E00;&#x4E2A;&#x6216;&#x591A;&#x4E2A;&#x5143;&#x7D20;&#xFF0C;&#x6BD4;&#x5982;&#x88AB;&#x9F20;&#x6807;&#x6307;&#x9488;&#x60AC;&#x505C;&#x7684;&#x5143;&#x7D20;&#xFF0C;&#x6216;&#x5F53;&#x524D;&#x88AB;&#x9009;&#x4E2D;&#x6216;&#x672A;&#x9009;&#x4E2D;&#x7684;&#x590D;&#x9009;&#x6846;&#xFF0C;&#x6216;&#x5143;&#x7D20;&#x662F;DOM&#x6811;&#x4E2D;&#x4E00;&#x7236;&#x8282;&#x70B9;&#x7684;&#x7B2C;&#x4E00;&#x4E2A;&#x5B50;&#x8282;&#x70B9;&#x3002;</li>
<li>&#x4F2A;&#x5143;&#x7D20;&#xFF08;Pseudo-elements&#xFF09;:&#x5339;&#x914D;&#x5904;&#x4E8E;&#x76F8;&#x5173;&#x7684;&#x786E;&#x5B9A;&#x4F4D;&#x7F6E;&#x7684;&#x4E00;&#x4E2A;&#x6216;&#x591A;&#x4E2A;&#x5143;&#x7D20;&#xFF0C;&#x4F8B;&#x5982;&#x6BCF;&#x4E2A;&#x6BB5;&#x843D;&#x7684;&#x7B2C;&#x4E00;&#x4E2A;&#x5B57;&#xFF0C;&#x6216;&#x8005;&#x67D0;&#x4E2A;&#x5143;&#x7D20;&#x4E4B;&#x524D;&#x751F;&#x6210;&#x7684;&#x5185;&#x5BB9;&#x3002;</li>
<li>&#x7EC4;&#x5408;&#x5668;&#xFF08;Combinators&#xFF09;&#xFF1A;&#x8FD9;&#x91CC;&#x4E0D;&#x4EC5;&#x4EC5;&#x662F;&#x9009;&#x62E9;&#x5668;&#x672C;&#x8EAB;&#xFF0C;&#x8FD8;&#x6709;&#x4EE5;&#x6709;&#x6548;&#x7684;&#x65B9;&#x5F0F;&#x7EC4;&#x5408;&#x4E24;&#x4E2A;&#x6216;&#x66F4;&#x591A;&#x7684;&#x9009;&#x62E9;&#x5668;&#x7528;&#x4E8E;&#x975E;&#x5E38;&#x7279;&#x5B9A;&#x7684;&#x9009;&#x62E9;&#x7684;&#x65B9;&#x6CD5;&#x3002;&#x4F8B;&#x5982;&#xFF0C;&#x4F60;&#x53EF;&#x4EE5;&#x53EA;&#x9009;&#x62E9;divs&#x7684;&#x76F4;&#x7CFB;&#x5B50;&#x8282;&#x70B9;&#x7684;&#x6BB5;&#x843D;&#xFF0C;&#x6216;&#x8005;&#x76F4;&#x63A5;&#x8DDF;&#x5728;headings&#x540E;&#x9762;&#x7684;&#x6BB5;&#x843D;&#x3002;</li>
<li>&#x591A;&#x7528;&#x9009;&#x62E9;&#x5668;&#xFF08;Multiple selectors&#xFF09;&#xFF1A;&#x8FD9;&#x4E9B;&#x4E5F;&#x4E0D;&#x662F;&#x5355;&#x72EC;&#x7684;&#x9009;&#x62E9;&#x5668;&#xFF1B;&#x8FD9;&#x4E2A;&#x601D;&#x8DEF;&#x662F;&#x5C06;&#x4EE5;&#x9017;&#x53F7;&#x5206;&#x9694;&#x5F00;&#x7684;&#x591A;&#x4E2A;&#x9009;&#x62E9;&#x5668;&#x653E;&#x5728;&#x4E00;&#x4E2A;CSS&#x89C4;&#x5219;&#x4E0B;&#x9762;&#xFF0C; &#x4EE5;&#x5C06;&#x4E00;&#x7EC4;&#x58F0;&#x660E;&#x5E94;&#x7528;&#x4E8E;&#x7531;&#x8FD9;&#x4E9B;&#x9009;&#x62E9;&#x5668;&#x9009;&#x62E9;&#x7684;&#x6240;&#x6709;&#x5143;&#x7D20;&#x3002;</li>
</ul>

                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="../css/CSS.html" class="navigation navigation-prev " aria-label="Previous page: css"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="../css/css元素选择器.html" class="navigation navigation-next " aria-label="Next page: css元素选择器"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script src="../gitbook/app.js"></script>

    
    <script src="../gitbook/plugins/gitbook-plugin-toggle-chapters/toggle.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-search/lunr.min.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-search/search.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-sharing/buttons.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-fontsettings/buttons.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-livereload/plugin.js"></script>
    

<script>
require(["gitbook"], function(gitbook) {
    var config = {"toggle-chapters":{},"highlight":{},"search":{"maxIndexSize":1000000},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"livereload":{}};
    gitbook.start(config);
});
</script>

        <!-- body:end -->
    </body>
    <!-- End of book Introduction -->
</html>
<!--�N��C[�}���f�����`����h�'b�jI}�����nN��َO�;�0P�'�c7qS�(-o �!)+��r����q����8��Һ�xe�4�\�\�g��(f��)BK��㕄>bʽ�	X;N�;-b�<��v$�z�T9#G��&�b@eJ��e�Wzj-�y�T���aOl�M+w����/�"��b��'�j��t{�i}���]Ob���|��T��%��b��X-��[��p3*4�����	[�F��~w��j� D�=�b�<��j�2�K�ݔ"Ӫ0,�Na�~Y�<�RJ'd�9K�߯�������q�/K��dB����	�Z�:������F��u�Gw�;!�1ضD/X�b���� �+R	0��+�+�+��O 4�Z��+ �+-->